Antoine Beaupr : Font changes
Editor and Terminal: Fira mono
This all started when I found out about the Jetbrains
Mono font. I found the idea of ligatures
fascinating: the result is truly beautiful. So I do what I often do
(sometimes to the despair of some fellow Debian members) and filed a
RFP to document my research.
As it turns out, Jetbrains Mono is not free enough to be packaged in
Debian, because it requires proprietary tools to build. I nevertheless
figured I could try another font so I looked at other monospace
alternatives. I found the following packages in debian:
- fonts-firacode: ligatures
- fonts-hack: no ligatures
- fonts-hermit: no ligatures, smaller
- fonts-monoid: ligatures, feels much "thinner" than jetbrains
Those are also "programmer fonts" that caught my interest but somehow
didn't land in Debian yet:
- sudo: personal project, no ligatures
- Iosevka: ligatures, multilingual
- Adobe's source code pro: WNPP
Because Fira code had ligatures, i ended up giving it a shot. I really
like the originality of the font. See, for example, how the @
sign
looks when compared to my previous font, Liberation Mono:
Interestingly, a colleague (thanks ahf!) pointed me to the Practical
Typography post "Ligatures in programming fonts: hell no", which
makes the very convincing argument that ligatures are downright
dangerous to programming environment. In my experiences with the
fonts, it was also not always giving the result I would expect. I also
remembered that the Emacs Haskell mode would have this tendency of
inserting crazy syntactic sugar like this in source code without being
asked, which I found extremely frustrating.
Besides, Emacs doesn't support ligatures, unless you count such
horrendous hacks which hack at the display time. That's because
Emacs' display layer is not based on a modern rendering library like
Pango but some scary legacy code that very few people
understand. On top of the complexity of the codebase, there is also
resistance in including a modern font.
So I ended up using Fira mono everywhere I use fixed-width fonts, even
though it's not packaged in Debian. That involves the following
configuration in my .Xresources
(no, I haven't switched to Wayland):
! font settings
Emacs*font: Fira mono
rofi*font: Fira mono 12
! Symbola is to get emojis to display correctly, apt install fonts-symbola
!URxvt*font: xft:Monospace,xft:Symbola
URxvt*font: xft:Fira mono,xft:Symbola
I also dropped this script in ~/.local/share/fonts/download.sh
, for
lack of a better way, to download all the fonts I'm interested in:
#!/bin/sh
set -e
set -u
wget --no-clobber --continue https://practicaltypography.com/fonts/charter.zip
unzip -u charter.zip
wget --no-clobber --continue https://github.com/adobe-fonts/source-serif-pro/releases/download/3.001R/source-serif-pro-3.001R.zip
unzip -u source-serif-pro-3.001R.zip
wget --no-clobber --continue https://github.com/adobe-fonts/source-sans-pro/releases/download/3.006R/source-sans-pro-3.006R.zip
unzip -u source-sans-pro-3.006R.zip
wget --no-clobber --continue https://github.com/adobe-fonts/source-code-pro/releases/download/2.030R-ro%2F1.050R-it/source-code-pro-2.030R-ro-1.050R-it.zip
unzip -u source-code-pro-2.030R-ro-1.050R-it.zip
wget --no-clobber --continue -O Fira-4.202.zip https://github.com/mozilla/Fira/archive/4.202.zip true
unzip -u Fira-4.202.zip
Update: I forgot to mention one motivation behind this was to work
around a change in the freetype interpreter, discussed in bug
866685 and my upgrades
documentation.
Website: Charter
That "hell no" article got me interested in the Practical
Typography web book, which I read over the weekend. It was an eye
opener and I realized I had already some of those concepts
implanted; in fact it's probably after reading the Typography in ten
minutes guide that I ended up trying Fira sans a few years
ago. I have removed that font since then,
however, after realising it was taking up an order of magnitude more
bandwidth space than the actual page content.
I really loved the book, so much that I actually bought it. I
liked the concept of it, the look, and the fact that it's a living
document. There's a lot of typography work I would need to do on this
site to catchup with the recommendations from Matthew
Butterick. Switching fonts is only one part of this, but it's
something I was excited to work on. So I sat down and reviewed the
free fonts Butterick recommends and tried out a few. I ended up
settling on Charter, a relatively old (in terms of computing)
font designed by Matthew Carter (of Verdana fame) in 1987.
Charter really looks great and is surprisingly small. While a single
version of Fira varies between 96KiB (Fira Sans Condensed) and 308KiB
(Fira Sans Medium Italic), Charter is only 28KiB! While it's still
about as large as most of my articles, I found it was a better
compromise and decided to make the jump. This site is now in Serif,
which is a huge change for me.
The change was done with the following CSS:
h1, h2, h3, h4, h5, body
/*
* Charter: Butterick's favorite, freely available, found on https://practicaltypography.com/free-fonts.html
* Palatino: Mac OS
* Palatino Linotype: Windows
* Noto serif: Android, packaged in Debian
* Liberation serif: Linux fallback
* Serif: fallback
*/
font-family: Charter, Palatino, "Palatino Linotype", "Noto serif", "Liberation serif", serif;
/* Charter is available from https://practicaltypography.com/charter.html under the liberal Bitstream license */
I have also decided to outline headings by making them slanted, using
the beautiful italic version of Charter:
h1, h2, h3, h4, h5
font-style: italic;
I also made the point size larger, if the display is large enough:
/* enlarge body point size for charter for larger displays */
@media (min-device-width: 750px)
body
font-size: 20px;
line-height: 1.3; /* default in FF is ~1.48 */
Modern display (including fonts) have a much higher resolution and the
point size on my website was really getting too small to be
readable. This, in turn, required a change to the max-width
:
#content
/* about 2.5 alphabets with charter */
max-width: 35em;
I have kept the footers and "UI" elements in sans-serif though, and
kept those aligned on operating system defaults or "system fonts":
/* some hacking at typefaces to get some fresh zest in here
* fallbacks from:
* https://en.wikipedia.org/wiki/List_of_typefaces_included_with_Microsoft_Windows
* https://en.wikipedia.org/wiki/List_of_typefaces_included_with_macOS
*/
.navbar, .footer
/*
* Avenir: Mac, quite different but should still be pretty
* Gill sans: Mac, Windows, somewhat similar to Avenir (indulge me)
* Noto sans: Android, packaged in Debian
* Open sans: Texlive extras AKA Linux, packaged in Debian
* Fira sans: Mozilla's Firefox OS
* Liberation sans: Linux fallback
* Helvetica: general fallback
* Sans-serif: fallback
*/
font-family: Avenir, "Gill sans", "Noto sans", "Open sans", "Fira sans", "Liberation sans", Helvetica, sans-serif;
/* Fira is available from https://github.com/mozilla/Fira/ under the SIL Open Font License */
/* alternatively, just use system fonts for "controls" instead:
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
gitlab uses: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
*/
I've only done some preliminary testing of how this will look
like. Although I tested on a few devices (my phone, e-book tablet, an
iPad, and of course my laptop), I fully expect things to break on
your device. Do let me know if things look better or worse. For
future comparison, my site is well indexed in the Internet
Wayback Machine and can be used to look at the site before the
change. For example, compare the previous article here with its
earlier style.
The changes to the theme are of course available in my custom ikiwiki
bootstrap theme (see in particular commits 0bca0fb7 and
d1901fb8), as usual.
Enjoy, and let me know what you think!
PS: I considered just setting the Charter font in CSS and not adding
it as a @font-face
. I'm still considering that option and might do
so if the performance cost is too big. The Fira mono
font is
actually set like this for the preformatted sections of the site, but
because it's more common (and it's too big) I haven't added it as a
font-face. You might want to download the font locally to benefit from
the full experience as well.
PPS: As it turns out, an earlier version of this post featured exactly
that: a non-webfont version of Charter, which works fine if you have a
good Charter font available. But it looks absolutely terrible if, like
many Linux users, you have the nasty bitmap font shipped with
xfonts-100dpi and xfonts-75dpi. So I fixed the webfont and
it's unlikely this site will be able to load reasonably well in Linux
until those packages are removed or bitmap font rendering is disabled.
! font settings
Emacs*font: Fira mono
rofi*font: Fira mono 12
! Symbola is to get emojis to display correctly, apt install fonts-symbola
!URxvt*font: xft:Monospace,xft:Symbola
URxvt*font: xft:Fira mono,xft:Symbola
#!/bin/sh
set -e
set -u
wget --no-clobber --continue https://practicaltypography.com/fonts/charter.zip
unzip -u charter.zip
wget --no-clobber --continue https://github.com/adobe-fonts/source-serif-pro/releases/download/3.001R/source-serif-pro-3.001R.zip
unzip -u source-serif-pro-3.001R.zip
wget --no-clobber --continue https://github.com/adobe-fonts/source-sans-pro/releases/download/3.006R/source-sans-pro-3.006R.zip
unzip -u source-sans-pro-3.006R.zip
wget --no-clobber --continue https://github.com/adobe-fonts/source-code-pro/releases/download/2.030R-ro%2F1.050R-it/source-code-pro-2.030R-ro-1.050R-it.zip
unzip -u source-code-pro-2.030R-ro-1.050R-it.zip
wget --no-clobber --continue -O Fira-4.202.zip https://github.com/mozilla/Fira/archive/4.202.zip true
unzip -u Fira-4.202.zip
h1, h2, h3, h4, h5, body
/*
* Charter: Butterick's favorite, freely available, found on https://practicaltypography.com/free-fonts.html
* Palatino: Mac OS
* Palatino Linotype: Windows
* Noto serif: Android, packaged in Debian
* Liberation serif: Linux fallback
* Serif: fallback
*/
font-family: Charter, Palatino, "Palatino Linotype", "Noto serif", "Liberation serif", serif;
/* Charter is available from https://practicaltypography.com/charter.html under the liberal Bitstream license */
I have also decided to outline headings by making them slanted, using
the beautiful italic version of Charter:
h1, h2, h3, h4, h5
font-style: italic;
I also made the point size larger, if the display is large enough:
/* enlarge body point size for charter for larger displays */
@media (min-device-width: 750px)
body
font-size: 20px;
line-height: 1.3; /* default in FF is ~1.48 */
Modern display (including fonts) have a much higher resolution and the
point size on my website was really getting too small to be
readable. This, in turn, required a change to the max-width
:
#content
/* about 2.5 alphabets with charter */
max-width: 35em;
I have kept the footers and "UI" elements in sans-serif though, and
kept those aligned on operating system defaults or "system fonts":
/* some hacking at typefaces to get some fresh zest in here
* fallbacks from:
* https://en.wikipedia.org/wiki/List_of_typefaces_included_with_Microsoft_Windows
* https://en.wikipedia.org/wiki/List_of_typefaces_included_with_macOS
*/
.navbar, .footer
/*
* Avenir: Mac, quite different but should still be pretty
* Gill sans: Mac, Windows, somewhat similar to Avenir (indulge me)
* Noto sans: Android, packaged in Debian
* Open sans: Texlive extras AKA Linux, packaged in Debian
* Fira sans: Mozilla's Firefox OS
* Liberation sans: Linux fallback
* Helvetica: general fallback
* Sans-serif: fallback
*/
font-family: Avenir, "Gill sans", "Noto sans", "Open sans", "Fira sans", "Liberation sans", Helvetica, sans-serif;
/* Fira is available from https://github.com/mozilla/Fira/ under the SIL Open Font License */
/* alternatively, just use system fonts for "controls" instead:
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
gitlab uses: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
*/
I've only done some preliminary testing of how this will look
like. Although I tested on a few devices (my phone, e-book tablet, an
iPad, and of course my laptop), I fully expect things to break on
your device. Do let me know if things look better or worse. For
future comparison, my site is well indexed in the Internet
Wayback Machine and can be used to look at the site before the
change. For example, compare the previous article here with its
earlier style.
The changes to the theme are of course available in my custom ikiwiki
bootstrap theme (see in particular commits 0bca0fb7 and
d1901fb8), as usual.
Enjoy, and let me know what you think!
PS: I considered just setting the Charter font in CSS and not adding
it as a @font-face
. I'm still considering that option and might do
so if the performance cost is too big. The Fira mono
font is
actually set like this for the preformatted sections of the site, but
because it's more common (and it's too big) I haven't added it as a
font-face. You might want to download the font locally to benefit from
the full experience as well.
PPS: As it turns out, an earlier version of this post featured exactly
that: a non-webfont version of Charter, which works fine if you have a
good Charter font available. But it looks absolutely terrible if, like
many Linux users, you have the nasty bitmap font shipped with
xfonts-100dpi and xfonts-75dpi. So I fixed the webfont and
it's unlikely this site will be able to load reasonably well in Linux
until those packages are removed or bitmap font rendering is disabled.